<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞机大战</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .message{
            width: 150px;
            height: 30px;
            font-size: 20px;
            position: fixed;
            background-color: #000000;
            color: #ffffff;
            padding: 20px;
        }
        #score {
            left: 20px;
            top: 20px;
        }
        #msg{
            left: 20px;
            top: 100px;
        }
        #level {
            right: 20px;
            top: 20px;
        }
        #time{
            right: 20px;
            top: 100px;
        }

        #container {
            width: 600px;
            height: 100vh;
            margin: 0 auto;
            background-color: #000000;
            position: relative;
            overflow: hidden;
        }

        .plane {
            width: 60px;
            height: 60px;
            background: url(./img/plane.png) no-repeat center / 60px 60px;
            position: absolute;
            bottom: 0px;
            left: 270px;
        }

        .enemy {
            width: 40px;
            height: 40px;
            background: url(./img/plane.png) no-repeat center / 40px 40px;
            transform: rotate(180deg);
            position: absolute;
            top: 0px;
        }

        .bullet {
            width: 8px;
            height: 20px;
            background-color: red;
            position: absolute;
            border-radius: 50% 50% 0 0;
            box-shadow: 0 2px 4px gold;
        }
    </style>
</head>

<body>
    <div id="score" class="message flex a-c">
        <div>击落数量：</div>
        <div class="count">0</div>
    </div>
    <div id="msg" class="message flex a-c">
        请击落20架敌机
    </div>
    <div id="level" class="message flex a-c">
        <div>当前关卡：</div>
        <div class="number">1</div>
    </div>
    <div id="time" class="message flex a-c">
        <div>剩余时间：</div>
        <div class="sec">60</div>
    </div>
    <!-- 游戏主界面 -->
    <div id="container">
        <!-- 飞机 -->
        <div class="plane"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //获取飞机对象
        let plane = $('.plane')

        //返回一个dom元素的四条边框到父级的距离
        function returnDOM_trbl(dom) {
            return {
                t: dom.offsetTop,
                r: dom.offsetLeft + dom.offsetWidth,
                b: dom.offsetTop + dom.offsetHeight,
                l: dom.offsetLeft
            }
        }

        let timer1 = null  //生成敌机的定时器
        let timer1_speed = 1000
        let timer2 = null  //敌机下落的定时器
        let timer2_speed = 500
        let timer3 = null  //让子弹飞一回儿的定时器
        let timer4 = null  //子弹跟敌机碰撞的定时器
        let timer5 = null  //倒计时定时器
        //开始游戏的方法
        function start() {
            //生成敌机的定时器
            timer1 = setInterval(() => {
                let left = Math.ceil(Math.random() * 560)  //随机返回敌机的left
                //生成敌机div
                let enemy = $('<div class="enemy"/>').css('left', left + 'px')
                //将敌机添加到容器中
                $('#container').append(enemy)
            }, timer1_speed);

            //敌机下落的定时器
            timer2 = setInterval(() => {
                //循环所有的敌机
                $('.enemy').each(function (index, item) {
                    let enemy = $(item)  //获取当前敌机
                    let top = enemy.offset().top   //获取敌机的top
                    top += 20
                    //敌机落到最下面，就清除
                    if (top > $("#container").innerHeight())
                        enemy.remove()
                    //更新敌机的top
                    $(item).css("top", top + 'px')
                })
            }, timer2_speed);

            //让子弹飞一回儿的定时器
            timer3 = setInterval(() => {
                //循环所有的子弹
                $('.bullet').each(function (index, item) {
                    let bullet = $(item)  //获取当前子弹
                    let top = bullet.offset().top   //获取子弹的top
                    top -= 20
                    //子弹飞到头，就清除
                    if (top < 0)
                        bullet.remove()
                    //更新子弹的top
                    $(item).css("top", top + 'px')
                })
            }, 100);

            //子弹跟敌机碰撞的定时器
            timer4 = setInterval(() => {
                //循环所有的敌机
                $('.enemy').each(function (index1, item1) {
                    let p1 = returnDOM_trbl(item1)  //返回敌机的位置对象
                    //循环所有的子弹
                    $('.bullet').each(function (index2, item2) {
                        let p2 = returnDOM_trbl(item2)
                        //判断所有的碰撞情况
                        if (checkCollision(p1, p2)) {
                            //删除敌机
                            $(item1).remove()
                            //删除子弹
                            $(item2).remove()
                            //获取当前分数
                            let count = parseInt($('.count').text())
                            //更新分数
                            count++
                            $('.count').text(count)
                        }
                    })

                    //判断敌机是否跟飞机碰撞
                    //plane[0] 表示 将jQuery对象转为DOM对象
                    let p3 = returnDOM_trbl(plane[0])
                    if (checkCollision(p1, p3)) {
                        //删除敌机
                        $(item1).remove()
                        //删除飞机
                        plane.remove()
                        //清空所有的定时器
                        clear()
                        alert('Game Over！\n学IT好工作，就找北大青鸟顾老师\n咨询QQ号:359910023')
                    }
                })
            }, 50);
        
            //倒计时定时器
            timer5 = setInterval(() => {
                let sec = parseInt($('.sec').text())
                sec--
                $('.sec').text(sec)
                //如果时间耗尽
                if(sec===0){
                    //倒计时恢复60秒
                    $('.sec').text(60)
                    //得分小于20，游戏结束。否则就进入下一关
                    //获取当前分数
                    let count = parseInt($('.count').text())
                    if(count<20){
                        //游戏结束
                        alert('Game Over！\n学IT好工作，就找北大青鸟顾老师\n咨询QQ号:359910023')
                        plane.remove()  //删除飞机
                        clear()  //清空所有的定时器
                    }else{
                        //清空击落敌机的数量
                        $('.count').text(0)
                        //进入下一关
                        let number = parseInt($('.number').text())
                        number++
                        //表示第五关打完
                        if(number===6){
                            alert('牛逼！您通过关了！')
                            clear()  //清空所有的定时器
                        }
                        $('.number').text(number)
                        //更新生成飞机的速度时间
                        timer1_speed -= 100
                        //更新飞机降落的时间
                        timer2_speed -= 80
                        clear()
                        start()
                    }
                }
            }, 900);
        }

        //定义时间，对生成子弹进行节流
        let date = null  //定义一个时间
        //创建子弹的方法
        function ceateBullet() {
            if (new Date() - date > 300) {
                let left = plane.position().left   //当前飞机的left
                let top = plane.position().top     //当前飞机的top
                //创建子弹div
                let bullet = $('<div class="bullet"/>').css({
                    left: (left + 26) + 'px',
                    top: top - 20 + 'px'
                })
                $("#container").append(bullet)
                date = new Date()  //获取当前时间
            }
        }



        //判断是否碰撞的方法
        function checkCollision(p1, p2) {
            if (p2.l > p1.l && p2.l < p1.r && p2.t > p1.t && p2.t < p1.b ||
                p2.r > p1.l && p2.r < p1.r && p2.t > p1.t && p2.t < p1.b ||
                p2.l > p1.l && p2.l < p1.r && p2.b > p1.t && p2.b < p1.b ||
                p2.r > p1.l && p2.r < p1.r && p2.b > p1.t && p2.b < p1.b ||
                p1.l > p2.l && p1.l < p2.r && p1.t > p2.t && p1.t < p2.b ||
                p1.r > p2.l && p1.r < p2.r && p1.t > p2.t && p1.t < p2.b ||
                p1.l > p2.l && p1.l < p2.r && p1.b > p2.t && p1.b < p2.b ||
                p1.r > p2.l && p1.r < p2.r && p1.b > p2.t && p1.b < p2.b) {
                return true
            } else {
                return false
            }
        }

        //飞机的left
        let planeleft = plane.position().left
        //飞机的top
        let planetop = plane.position().top
        //飞机移动的最小left
        let minLeft = 0
        //飞机移动的最小top
        let minTop = 0
        //飞机移动的最大left
        let maxLeft = $("#container").innerWidth() - plane.innerWidth()
        //飞机移动的最大top
        let maxTop = $("#container").innerHeight() - plane.innerHeight()

        //offset()方法，是相对于浏览器返回位置
        //position()方法，是相对于定位的父级返回位置
        //键盘按下事件
        $(window).keydown(function (e) {
            //keyCode
            //a->65 d->68 w->87 s->83 j->74
            switch (e.keyCode) {
                case 65:
                    planeleft -= 20
                    if (planeleft < minLeft) planeleft = minLeft
                    plane.css("left", planeleft + 'px')
                    //飞机向左
                    break;
                case 68:
                    //飞机向右
                    planeleft += 20
                    if (planeleft > maxLeft) planeleft = maxLeft
                    plane.css("left", planeleft + 'px')
                    break;
                case 87:
                    //飞机向上
                    planetop -= 20
                    if (planetop < minTop) planetop = minTop
                    plane.css("top", planetop + 'px')
                    break;
                case 83:
                    //飞机向下
                    planetop += 20
                    if (planetop > maxTop) planetop = maxTop
                    plane.css("top", planetop + 'px')
                    break;
                case 74:
                    //发射子弹
                    ceateBullet()
                    break;
                case 13:
                    if(timer1){
                        //暂停
                        clear()
                    }else{
                        //开始
                        start()
                    }
                    break;
            }
        })

        //清空定时器的方法
        function clear() {
            //清空所有的定时器
            clearInterval(timer1)
            timer1 = null
            clearInterval(timer2)
            timer2 = null
            clearInterval(timer3)
            timer3 = null
            clearInterval(timer4)
            timer4 = null;
            clearInterval(timer5)
            timer5 = null;
        }
    </script>
</body>

</html>